<template>
    <div class="page-container register">
        <el-form 
			ref="$register-form" 			
			class="register-form" 
			auto-complete="on" 
			label-position="left" 
            v-bind:model="registerData"
            v-bind:rules="registerDataRules">
            
        </el-form>
    </div>
</template>

<script>
    export default {
        name:"Register",
        data(){
            return {
                registerData:{},
                registerDataRules:{}
            }
        }
    }
</script>


<!-- 
    这里lang="less"也有效，因为配置了scss模块化，less没有配置，scoped只是在scss时有效，
    也可以添加，照着webpack.config.js配置就行了
-->
<style lang="scss" scoped>
    .register{
        .register-form{        
            width: 520px;
            height: 300px;
            position: absolute;
            margin: auto;
            top:0;
            right: 0;
            bottom: 0;
            left:0;
            overflow: hidden;
            background-color: red;
        }
    }
</style>>
<!--
    元素上下左右居中的四种写法
        定位居中1：relative，left top 50%，负margin-left margin-top
        定位居中2：absolute，margin: auto
        定位居中3：relative，left top 50%，transform: translate(-50%,-50%)
            .register-form{ 
                position: absolute; 
                top: 50%; 
                left: 50%; 
                transform: translate(-50%,-50%);
                background-color: #a00; 
                width: 200px; 
                height: 200px;  
            }
        定位居中4：flex
-->